<template>
    <div id="accountRank">
        <el-tabs type="border-card" v-loading="loading">
             <!-- 时间选择 -->
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" class="date-search">
                        <el-date-picker
                        v-model="date"
                        type="daterange" 
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                    <el-input v-model="username" autocomplete="off" placeholder="请输入搜索的账号" class="searchUsername"></el-input>
                    <el-button icon="el-icon-search" type="primary" circle @click="search"></el-button>
                </el-col>
            </el-row>
            <el-row class="total">
                <el-col :xs="23" :sm="11" :md="8" :lg="5"  class="total-box">
                    <p class="title">
                        充值金额
                    </p>
                    <p class="date">
                        {{startDate}} - {{endDate}}
                    </p>
                    <p>
                        合计
                    </p>
                    <p>
                        {{amount||0}}
                    </p>
                </el-col>
                <el-col :xs="23" :sm="11" :md="8" :lg="5"  class="total-box">
                    <p class="title">
                        充值人数
                    </p>
                    <p class="date">
                        {{startDate}} - {{endDate}}
                    </p>
                    <p>
                        合计
                    </p>
                    <p>
                        {{username_sum||0}}人
                    </p>
                </el-col>
                <el-col :xs="23" :sm="11" :md="8" :lg="5"  class="total-box">
                    <p class="title">
                        游戏数
                    </p>
                    <p class="date">
                        {{startDate}} - {{endDate}}
                    </p>
                    <p>
                        合计
                    </p>
                    <p>
                        {{gameid_sum||0}}款
                    </p>
                </el-col>
                <el-col :xs="23" :sm="11" :md="8" :lg="5"  class="total-box">
                    <p class="title">
                        渠道数
                    </p>
                    <p class="date">
                        {{startDate}} - {{endDate}}
                    </p>
                    <p>
                        合计
                    </p>
                    <p>
                        {{agent_sum||0}}个
                    </p>
                </el-col>
            </el-row>

            <el-table
                :data="tableData"
                style="width: 100%"
                :default-sort = "{prop: 'date', order: 'descending'}"
                @sort-change='sortChange'
                :cell-style="cellColor">
                <el-table-column
                prop="username"
                sortable="custom"
                label="账号">
                </el-table-column>

                <el-table-column
                prop="number"
                sortable="custom"
                label="充值次数">
                </el-table-column>

                <el-table-column
                prop="amount"
                sortable="custom"
                label="充值金额">
                </el-table-column>

                <el-table-column
                prop="gameName"
                label="最后充值游戏">
                </el-table-column>

                <el-table-column
                prop="create_time"
                label="最后充值日期"
                sortable="custom"
                :formatter="dateFormat">
                </el-table-column>

                <el-table-column
                prop="last_logintime"
                sortable="custom"
                :formatter="dateFormat"
                label="最后登录时间">
                </el-table-column>

                <el-table-column
                label="账号详情">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small" @click="openDialog(scope.row)" v-if="scope.row.maintain==1">已维护</el-button>
                        <el-button type="text" size="small" @click="openDialog(scope.row)" v-else-if="scope.row.maintain==2">未维护</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
                    :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total" v-if="total!==0">
                </el-pagination>
            </div>
        </el-tabs>

        <!-- 弹出框 -->
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form" size="small">
                <el-form-item label="账号：" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="联系方式：" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.contact" autocomplete="off"></el-input>
                </el-form-item>
                 <el-form-item label="备注：" prop="desc" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item label="成功联系：" :label-width="formLabelWidth" class="checkContact">
                    <el-radio-group v-model="form.status">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {accountRank,rankMaintain,reviseMaintain} from 'api/server'
    import {formatDate} from 'common/js/date'
    export default {
        data(){
            return{
                loading: false,
                date:'',
                saveDate:'',
                form:{},
                tableData: [],
                dialogFormVisible:false,
                formLabelWidth: '100px',
                listQuery: {
                    page: 1,
                    limit: 10
                },
                total: 0,
                amount:'', //充值金额
                username_sum:'', //充值总人数
                gameid_sum:'' ,  //充值总游戏数
                agent_sum:'',     //渠道总渠道数
                username:'',
                sort_by:1,
                sort_name:''
            }
        },
        created(){
            this.init();
        },
        computed:{
             startDate(){
                if(this.saveDate){
                    return this.saveDate[0]
                }else{
                    let date = new Date();
                    let month = parseInt(date.getMonth()+1);
                    var day = date.getDate();

                    if (month < 10) {
                        month = '0' + month
                    }
                    if (day < 10) {
                        day = '0' + day
                    }
                    return date.getFullYear() + '-' + month + '-' + day;
                }
            },
            endDate(){
                if(this.saveDate){
                    return this.saveDate[1]
                }else{
                    let date = new Date();
                    let month = parseInt(date.getMonth()+1);
                    var day = date.getDate();

                    if (month < 10) {
                        month = '0' + month
                    }
                    if (day < 10) {
                        day = '0' + day
                    }
                    return date.getFullYear() + '-' + month + '-' + day;
                }
            }
        },
        methods:{
            init(){
                try{
                    if(window.sessionStorage.getItem('direction')=="back"){
                        this.date=JSON.parse(window.sessionStorage.getItem("searchDate"))||"";
                        this.saveDate=this.date;
                        this.listQuery.page=parseInt(window.sessionStorage.getItem("pageIndex")||1);

                        window.sessionStorage.removeItem("direction");
                    }
                }catch(err){}
                this.loading=true;
                accountRank(this.date,this.username,this.listQuery.page,this.listQuery.limit,this.sort_by,this.sort_name).then(res=>{
                    if(res.data.error==0){
                        this.loading = false;
                        this.total=parseInt(res.data.content.total);
                        this.tableData=res.data.content.data;

                        this.amount=res.data.content.amount_sum;
                        this.username_sum=res.data.content.username_sum;
                        this.gameid_sum=res.data.content.gameid_sum;
                        this.agent_sum=res.data.content.agent_sum;
                    }else{
                        this.loading = false;
                    }
                })
            },
            cellColor(row,column){
                let threeAgo=this.FunGetDateStr(-3) + " 00:00:00";
                if(row.column.label=="最后登录时间"&&row.row.last_logintime*1000<new Date(threeAgo).getTime()){
                     return 'color:red';
                }
            },
            FunGetDateStr(p_count){
                let dd = new Date();
                dd.setDate(dd.getDate() + p_count);
                let y = dd.getFullYear();
                let m = dd.getMonth() + 1;
                let d = dd.getDate();
                return y + "-" + m + "-" + d;
            },
            search(){
               if(!this.date){
                   this.date="";
               }
               this.saveDate=this.date;
               
               window.sessionStorage.setItem("searchDate",JSON.stringify(this.date));
               this.init();
            },
            handleClick(scope){
               let username=scope.username;
               this.$router.push({path:`/rankDetail/${username}`});
            },
            openDialog(row){
                let username=row.username;
                rankMaintain(username,1).then(res=>{
                    if(res.data.error==0){
                        this.form=res.data.content;
                        this.dialogFormVisible=true;
                    }
                }) 
            },
            handleSizeChange(val) {
                this.listQuery.limit = val
                this.init();
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.listQuery.page = val;
                window.sessionStorage.setItem('pageIndex', val)
                this.init();
            },
            sortChange (column, prop, order){
                if(column.order=="ascending"){
                    this.sort_by=2;
                    this.sort_name=column.prop;
                    this.init();
                }else if(column.order=="descending"){
                    this.sort_by=1;
                    this.sort_name=column.prop;
                    this.init();
                }
                 //ascending 从小到大   descending从大到小
            },
            dateFormat(row,column){
                if(column.property=="last_logintime"){
                    var time=row.last_logintime;
                    if(!time) return
                }else if(column.property=="create_time"){
                    var time=row.create_time;
                    if(!time) return
                }
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            },
            submitForm(){
                if(!this.form.contact&&this.form.status==1){
                    this.$message.error('请填入联系方式');
                    return;
                }
                reviseMaintain(this.form.username,this.form.contact,this.form.remark,this.form.status,1).then(res=>{
                    if(res.data.error==0){
                        this.dialogFormVisible=false;
                        this.init();
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.searchUsername{
    width:180px;
}
h3{
    font-weight: normal;
}
.date-search{
    margin-top:20px;
    text-align: left;
}
.checkContact{
    text-align: left;
}
.total{
    padding:20px 0;
    font-size: 14px;
    color: #606266;
    text-align: left;
    .total-box{
        margin-left:3%;
        margin-bottom:20px;
        padding: 10px;
        border: 1px solid #ddd;
        /* background: #f0f3f4; */
    }
    .title{
        font-size:16px;
        line-height:32px;
        color:#333;
    }
    .date{
        margin-bottom:10px;
        color:#999;
    }
}
</style>